$(function() {
    $('.logout').on('click', function() {
        //  询问用户是否退出
        // 删除本地中tokens
        // 跳转到登录页面
        layer.confirm('确认要退出吗?', { icon: 3, title: '提示' }, function(index) {
            //do something
            localStorage.removeItem('tokens')
            location.href = '/login.html'
                // 关闭弹出层
            layer.close(index);
        });
    })
    initUser();
})



// 封装获取用户信息的函数
function initUser() {
    axios.get('/my/userinfo').then(({ data: res }) => {
        // console.log(res);
        //  成功的回调
        readlist(res.data)
    }, (error) => {
        if (error.response.status === 401) {
            localStorage.removeItem('tokens')
            location.href = '/login.html'
        }
    })
}

function readlist(data) {
    let name = data.nickname || data.username
    let textAvaer = name.charAt(0).toUpperCase()
        // 做一个判断
        // 如果有头像则显示用户的头像，没有头像则显示文本头像
    if (data.user_pic) {
        $('#header-avatar').html(`
      <img src="${data.user_pic}" class="layui-nav-img">
      个人中心
      `)
    } else {
        $('#header-avatar').html(`
        <div class="text-avatar">
        ${textAvaer}
        </div>
        个人中心
      `)

    }
    // 渲染侧边栏用户信息
    if (data.user_pic) {
        // 渲染图片头像
        $('.user-info-box').html(`
        <img src="${data.user_pic}" class="layui-nav-img">
        <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>
      `)
    } else {
        // 渲染文本头像
        $('.user-info-box').html(`
        <div class="text-avatar">${textAvaer}</div>
        <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>
      `)
    }
    //在元素动态生成好了之后，调用layui提供的element.render(type, filter); 方法
    layui.element.render('nav', 'header-nav');
}
// 定义切换高亮度的函数
function highlight(kw) {
    $(`dd:contains("${kw}")`).addClass('layui-this').siblings('dd').removeClass('layui-this')
}